<template>
  <div>
    <el-form ref="formRef" :model="form" label-width="120px">
      <el-row>
        <el-col :span="8" :key="key" v-for="(item, key) in queryInfo">
          <el-form-item :label="item.label">
            <el-select
              v-if="item.type === 'select'"
              :multiple="item.multiple"
              :disabled="item.disabled"
              collapse-tags
              placeholder="请选择"
              v-model="form[key]"
              @change="
                val => {
                  change(item, val);
                }
              "
              style="width: 100%"
            >
              <el-option
                v-for="item2 in item.options"
                :key="item2.value"
                :label="item2.label"
                :value="item2.value"
              >
              </el-option>
            </el-select>
            <el-date-picker
              v-else-if="item.type === 'datetime'"
              v-model="form[key]"
              :disabled="item.disabled"
              type="datetime"
              value-format="YYYY-MM-DD"
              style="width: 100%"
            />
            <el-input
              v-else-if="item.type === 'input'"
              v-model="form[key]"
              :disabled="item.disabled"
              :maxlength="item.maxlength"
              show-word-limit
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script setup>
import { useSlots } from "vue";
const slots = useSlots();

const props = defineProps({
  title: String,
  queryInfo: Object,
  form: Object,
});

const state = reactive({
  // form:{}
});

const change = (item, value) => {
  let label = "";
  item.options.map(item2 => {
    label = item2.label;
  });
  item.change && item.change(value, label);
};

onMounted(() => {});
onUnmounted(() => {});
</script>

<style lang="scss" scoped></style>
